@charset "utf-8";

/* 常用变量 */
@color_border-tb: #bfbfbf;
@color_p: #757474;
@color_shadow: #dad7d7;
@color_required: rgba(253, 8, 8, 0.29);
@color_border: #ccc;
@px_5: 5px;

.fieldset { border: 1px dotted @color_border; background-color: #fff; border-radius: @px_5; box-shadow: 2px 2px 5px @color_shadow; padding: @px_5+5; margin-bottom: 20px; }
.legend { float: left; width: 100%; margin-bottom: @px_5+10; }
.normal { width: 40%; float: right; padding: 5px; font-size: 20px; border-radius: 8px; border: 1px solid @color_border; transition: background .8s ease-out; }
.range { width: 40%; float: right; font-size: 14px; }
.required { border: 1px solid @color_required !important; }
.submit { transition: all 1s ease; padding: 10px 30px; background-color: #b01c20; font-size: 30px; border-radius: 6px; box-shadow: 1px 1px 0 -1px white, 3px 3px 5px black; color: white; float: right; }

article fieldset {
	.fieldset;
	/* 嵌套 */
	legend {.legend}
	div {
		margin-bottom: @px_5+5; float: left; width: 100%;
		label { width: 35%; float: left; }
		textarea, input:not([type="range"]):not([type="submit"]) {
			.normal;
			&:not([type="number"]):focus:invalid { background: url('../images/wrong.png') no-repeat 98%; }
			&:not([type="number"]):focus:valid { background: url('../images/check.png') no-repeat 98%; }
		}
		input[type="range"] {
			&:focus { border-radius: 15px; font-size: 15px; }
		}
		input:required { .required }
	}
	
}
form input[type="submit"] {
		.submit;
		&:hover { color: #000; border: 1px solid #000; text-shadow: 0 1px #fff; box-shadow: 1px 1px 5px #000 inset; }
	}
